<template>
  <div class="apply">
    <div class="banner flexc">
      <p>{{ $t('activity.newdexForm') }}</p>
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm" class="formRule">
      <div class="caption">{{ $t('activity.personInfo') }}</div>
      <el-form-item :label="$t('activity.applicant')" label-width="130px">
        <el-radio-group v-model="form.type">
          <el-radio label='1'>{{ $t('activity.individual') }}</el-radio>
          <el-radio label='2'>{{$t('activity.institution') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.type === '1'">
        <el-form-item :label="$t('activity.formName')" prop="name" label-width="120px">
          <el-input maxlength="100" v-model.trim="form.name" class="formInput"></el-input>
        </el-form-item>
        <el-form-item :label="$t('activity.formGender')" prop="gender" label-width="120px">
          <el-input maxlength="100" v-model.trim="form.gender" class="formInput"></el-input>
        </el-form-item>
        <el-form-item :label="$t('activity.formAge')" prop="age" label-width="120px">
          <el-input type="number" v-model="form.age" @keyup.native="handleAge" class="formInput"></el-input>
        </el-form-item>
      </template>
      <template v-if="form.type === '2'">
        <el-form-item :label="$t('activity.institution')" prop="name" label-width="120px">
          <el-input maxlength="100" v-model.trim="form.name" class="formInput"></el-input>
        </el-form-item>
      </template>
      <el-form-item :label="$t('activity.formNation')" prop="country" label-width="120px">
        <el-input v-model.trim="form.country" maxlength="100" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formCity')" prop="city" label-width="120px">
        <el-input v-model.trim="form.city" maxlength="100" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formEosAccount')" prop="eosAccount" label-width="120px">
        <el-input v-model.trim="form.eosAccount" maxlength="12" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('ndxStake.email')" prop="email" label-width="120px">
        <el-input v-model.trim="form.email" maxlength="100" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formProfession')" label-width="120px">
        <el-input v-model.trim="form.job" maxlength="100" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formPhoneNumber')" label-width="120px">
        <el-input v-model.trim="form.phoneNumber" maxlength="100" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formTelegramNumber')" label-width="120px">
        <el-input v-model.trim="form.telegram" maxlength="100" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formWechatNumber')" label-width="120px">
        <el-input v-model.trim="form.wechat" maxlength="100" class="formInput"></el-input>
      </el-form-item>
      <div class="caption-title">{{ $t('activity.fillInOne') }}</div>
      <div class="caption">{{ $t('activity.newdexQuestion') }}</div>
      <div class="tip caption">{{ $t('activity.newdexTip') }}</div>
      <el-form-item :label="$t('activity.formTip1')" prop="answer1" style="padding-left: 90px;">
        <el-input type="textarea" v-model.trim="form.answer1" maxlength="2000" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formTip2')" prop="answer2" style="padding-left: 90px;">
        <el-input type="textarea" v-model.trim="form.answer2" maxlength="2000" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formTip3')" prop="answer3" style="padding-left: 90px;">
        <el-input type="textarea" v-model.trim="form.answer3" maxlength="2000" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formTip4')" prop="answer4" style="padding-left: 90px;">
        <el-input type="textarea" v-model.trim="form.answer4"  maxlength="2000" class="formInput"></el-input>
      </el-form-item>
      <el-form-item :label="$t('activity.formTip5')" prop="answer5" style="padding-left: 90px;">
        <el-input type="textarea" v-model.trim="form.answer5" maxlength="2000" class="formInput"></el-input>
      </el-form-item>
      <el-form-item class="formChecked" style="padding-left: 90px;" :label="$t('activity.formTip6')" prop="answer6">
        <el-checkbox-group v-model="form.answer6">
          <el-checkbox :label="$t('activity.formTipCheck1')" name="type"></el-checkbox>
          <el-checkbox :label="$t('activity.marketingCommunication')" name="type"></el-checkbox>
          <el-checkbox :label="$t('activity.businessDevelopment')" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <div class="thanks">{{ $t('activity.formThanks') }}</div>
      <el-form-item class="btn flexc">
        <el-button type="primary" class="elBtn" @click="handleSubmitForm('ruleForm')">{{ $t('activity.submit') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {
      form: {
        type: '1',
        name: '',
        gender: '',
        age: '',
        country: '',
        city: '',
        job: '',
        eosAccount: '',
        telegram: '',
        wechat: '',
        email: '',
        phoneNumber: '',
        answer1: '',
        answer2: '',
        answer3: '',
        answer4: '',
        answer5: '',
        answer6: [],
      },
      rules: {
        name: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        gender: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        age: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        country: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        city: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        eosAccount: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        email: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer1: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer2: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer3: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer4: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer5: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer6: [
          { type: 'array', required: true, message: this.$t('activity.isRequired') }
        ],
      }
    }
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.language': function change() {
      this.rules = {
        name: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        gender: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        age: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        country: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        city: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        eosAccount: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        email: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer1: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer2: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer3: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer4: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer5: [
          { required: true, message: this.$t('activity.isRequired') },
        ],
        answer6: [
          { type: 'array', required: true, message: this.$t('activity.isRequired') }
        ],
      };
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
  },
  beforeDestroy() {},
  methods: {
    handleAge() {
      if (this.form.age > 200) {
        this.form.age = 200;
      }
    },
    // 提交表单
    handleSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.form.telegram && !this.form.wechat) {
            this.$message.error(this.$t('activity.fillInOne'));
            return;
          }
          const params = this.form;
          if (this.form.type === '1') {
            params.type = this.$t('activity.individual');
          }
          if (this.form.type === '2') {
            params.type = this.$t('activity.institution');
          }
          params.answer6 = params.answer6.join(',');
          this.$http.post('/ambassador/apply', params).then((res) => {
            if (res.code !== 0) {
              this.$message.error(res.msg);
              this.form.answer6 = [];
              return;
            }
            this.$alert(this.$t('activity.submitSuccess'), this.$t('public.reTip'), {
              confirmButtonText: this.$t('public.sure'),
              center: true,
              customClass: 'confirmClass'
            });
            this.$refs[formName].resetFields();
            if (this.form.type === this.$t('activity.individual')) {
              this.form.type = '1';
            }
            if (this.form.type === this.$t('activity.institution')) {
              this.form.type = '2';
            }
            this.form.answer6 = [];
            this.form.telegram = '';
            this.form.wechat = '';
            this.form.phoneNumber = '';
            this.form.job = '';
            this.form.name = '';
            this.form.gender = '';
            this.form.age = '';
          });
        }
      });
    },
  },
}
</script>
<style lang="scss" scoped>
.apply{
  width: 800px;
  margin: 0 auto;
  background: #fff;
  min-height: 1000px;

  .banner {
    height: 200px;
    background: url('../../../assets/img/activity/ambassador/banner.png') center center no-repeat;
    background-size: cover;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
  }

  .caption {
    margin-bottom: 20px;
    text-align: center;
  }

  .caption-title {
    padding-left: 120px;
    font-size: 12px;
    color: red;
    margin-bottom: 35px;
  }

  .formRule {
    padding: 20px 5px;
  }

  .formInput {
    width: 80%;
  }

  .caption {
    margin-bottom: 10px;
  }

  .tip {
    text-align: center;
    color: red;
  }

  .thanks {
    text-align: center;
    // padding-left: 112px;
  }

  .btn {
    // margin-left: 50px;
    margin-top: 20px;
  }

  .formChecked {
    /deep/ .el-form-item__label {
      width: 100%;
      text-align: left;
    }
  }

  .elBtn {
    width: 200px;
    margin: 0 auto;
  }
}

.theme-1B1D27 {
  .formInput {
    /deep/ .el-input__inner {
      background: #fff;
    }
  }

  .formChecked {
    color: #7b8db9 !important;

    /deep/ .el-checkbox__label {
      color: #7b8db9 !important;
    }

    /deep/ .el-checkbox__inner {
      border-color: rgba(0, 0, 0, 0.3) !important;
    }
  }
}
</style>
